<template>
	<uni-popup ref="popup" type="bottom">
		<view class="calendar-box">
			<calendar
				:theme-color="themeColor"
				:is-show="true"
				:mode="currentMode"
				:start-date="currentStartDate"
				:end-date="currentEndDate"
				@callback="getDate">
				<template v-slot:footer>
					<view class="calendar-submit font15 font-ffffff flex-row-center" @tap="confirmDate">确定</view>
				</template>
			</calendar>
		</view>
	</uni-popup>
</template>

<script>
	import Calendar from '@/components/mobile-calendar-range/calendar.vue';
	export default {
		components: { Calendar },
		props: {
			themeColor: { // 主题颜色
				type: String,
				default: '#0000'
			},
			mode: { // 日历类型：1标准模式，2酒店模式
				type: String,
				default: '2'
			},
			startDate: { // 默认入住日期
				type: String,
				default: ''
			},
			endDate: { // 默认离店日期
				type: String,
				default: ''
			},
			dayCount: { // 入住天数
				type: String,
				default: '1'
			}
		},
		data() {
			return {
				currentMode: '',
				currentStartDate: '',
				currentEndDate: '',
				dateObj: null // 点击的日期
			}
		},
		mounted() {
			this.currentMode = this.mode
			this.currentStartDate = this.startDate
			this.currentEndDate = this.endDate
			this.initDate({
				mode: this.mode,
				startDate: this.startDate,
				endDate: this.endDate
			})
		},
		methods: {
			// 打开日历
			openCalendar () {
				this.$refs.popup.open()
			},
			// 关闭日历
			closeCalendar () {
				this.$refs.popup.close()
			},
			// 获取回调的日期数据
			getDate (date) {
				// console.log('点击的日期' + JSON.stringify(date))
				this.dateObj = date
			},
			// 确定选中的日期
			confirmDate () {
				if (this.dateObj) {
					this.convertDate({
						start: new Date(this.dateObj.startStr.dateStr), // 入住
						end: this.currentMode == '2' ? new Date(this.dateObj.endStr.dateStr) : '', // 离店
						dayCount: this.currentMode == '2' ? this.dateObj.dayCount : 1
					})
				} else {
					uni.showToast({ title: '请选择入离日期', icon: 'none' });
				}
				
			},
			// 初始化日期
			initDate (data) {
				// console.log('初始化' + JSON.stringify(data))
				if (data) {
					this.currentMode = data.mode
				}
				let time = new Date();
				if (time.getHours() >= 0 && time.getHours() < 12) {
					// this.convertDate({
					// 	start: this.currentStartDate ? new Date(this.currentStartDate) : new Date(new Date().getTime() - 24*60*60*1000), // 当前日期
					// 	end: this.currentEndDate ? new Date(this.currentEndDate) :  new Date(), // 当前日期后一天
					// 	dayCount: this.currentMode == '2' ? this.dayCount : 1
					// })
					this.convertDate({
						start: this.currentStartDate ? new Date(this.currentStartDate) : new Date(), // 当前日期
						end: this.currentEndDate ? new Date(this.currentEndDate) : new Date(new Date().getTime() + 24*60*60*1000), // 当前日期后一天
						dayCount: this.currentMode == '2' ? this.dayCount : 1
					})
				}else{
					this.convertDate({
						start: this.currentStartDate ? new Date(this.currentStartDate) : new Date(), // 当前日期
						end: this.currentEndDate ? new Date(this.currentEndDate) : new Date(new Date().getTime() + 24*60*60*1000), // 当前日期后一天
						dayCount: this.currentMode == '2' ? this.dayCount : 1
					})
				}
			},
			// 转换成自己需要的格式
			convertDate (data) {
				let obj = {}
				obj.mode = this.currentMode
				obj.startDate = this.$base.formatTime(data.start, 'yyyy/MM/dd')
				obj.startWeek = this.$base.formatTime(data.start, 'EE')
				obj.dayCount = data.dayCount
				if (this.currentMode == '2') {
					obj.endDate = this.$base.formatTime(data.end, 'yyyy/MM/dd')
					obj.endWeek = this.$base.formatTime(data.end, 'EE')
				}
				this.$refs.popup.close()
				this.$emit('callback', obj)
			}
		}
	}
</script>

<style scoped>
</style>
